<template>
    <div class="box" v-loading="loading">
        <div class="toolBox">
            <div class="title">积木式AI工具箱</div>
            <div class="toolBox-bottom">
                <!-- <el-button @click="upload" type="warning" size="large">上传图片</el-button> -->
                <VueDraggable id="drag1" :group="{ name: 'a', pull: 'clone', put: false }" :animation="150"
                    v-model="list1" style="display: flex; margin-top: 5px">
                    <el-tag v-for="(item, index) in list1" :type="item.type" size="large" :key="index" style="
                background: rgb(56, 56, 56);
                color: #fff;
                border: 3px solid #fff;
              ">
                        <div>{{ item.name }}</div>
                    </el-tag>
                </VueDraggable>
            </div>
        </div>

        <div class="content">
            <div class="content-title">AI智能线稿配色推荐</div>

            <div style="display: flex">
                <div class="botton-compact" style="display: flex; align-items: center;width: 300px;">
                    <div>① 线稿图</div>
                </div>
                <div class="botton-compact" style="display: flex; align-items: center;width: 800px;margin-left: 50px;">
                    <div>② 预测模型 </div>
                </div>
                <div class="botton-compact" style="display: flex; align-items: center;">
                    <div>③ 预测结果</div>
                </div>
            </div>

            <div class="content-box">
                <div class="content-upload1">
                    <div class="upload-demo" v-if="demo">
                        <div @click="upload" class="uploader">
                            <el-image v-if="imageUrl" :src="imageUrl"
                                style="width: 100%; max-height: 360px; margin: auto" />
                            <div v-else style="margin: auto">
                                <el-icon style="color: aqua">
                                    <Plus />
                                </el-icon>
                            </div>
                        </div>
                        <input id="getimg" type="file" @change="handleFileChange" />
                    </div>

                    <div class="upload-demo1" v-if="!demo">
                        <el-tooltip class="box-item" effect="dark" content="这里请上传外足弓图片" placement="left">
                            <div class="iconfont iconshuzi2" style="font-size: 40px; color: #409eff" />
                        </el-tooltip>
                        <div @click="upload1" class="uploader">
                            <el-image v-if="imageUrl1" :src="imageUrl1" class="upload-image" />
                            <div v-else style="margin: auto">
                                <el-icon style="color: aqua">
                                    <Plus />
                                </el-icon>
                            </div>
                        </div>
                        <input id="getimg1" type="file" @change="handleFileChange1" />
                    </div>

                    <div class="upload-demo1" v-if="!demo">
                        <el-tooltip class="box-item" effect="dark" content="这里请上传内足弓图片" placement="left">
                            <div class="iconfont iconshuzi-" style="font-size: 40px; color: #409eff" />
                        </el-tooltip>
                        <div @click="upload2" class="uploader">
                            <el-image v-if="imageUrl2" :src="imageUrl2" class="upload-image" />
                            <div v-else style="margin: auto">
                                <el-icon style="color: aqua">
                                    <Plus />
                                </el-icon>
                            </div>
                        </div>
                        <input id="getimg2" type="file" @change="handleFileChange2" />
                    </div>

                    <div class="upload-demo1" v-if="!demo">
                        <el-tooltip class="box-item" effect="dark" content="这里请上传脚底图片" placement="left">
                            <div class="iconfont iconshuzi" style="font-size: 40px; color: #409eff" />
                        </el-tooltip>
                        <div @click="upload3" class="uploader">
                            <el-image v-if="imageUrl3" :src="imageUrl3" class="upload-image" />
                            <div v-else style="margin: auto">
                                <el-icon style="color: aqua">
                                    <Plus />
                                </el-icon>
                            </div>
                        </div>
                        <input id="getimg3" type="file" @change="handleFileChange3" />
                    </div>

                    <div style="">
                        <el-button style="font-size: 38px; font-weight: 900; padding: 30px" type="info" size="large"
                            @click="upload">上传图片</el-button>
                    </div>
                </div>

                <div class="content-upload1" style="flex: 0.5; ">
                    <div style="
                      width: 100%;
                      height: 470px;
                      display: flex;
                      flex-direction: column;
                        ">
                        <div class="absolute">
                            <VueDraggable id="drag2" :group="{ name: 'a' }" :animation="150" v-model="list2"
                                style="display: flex; flex-wrap: wrap" @sort="sotr">
                                <el-tag @close="handleClose(item)" closable v-for="item in list2" :type="item.type"
                                    :key="item" style="
                                background: rgb(56, 56, 56);
                                color: #fff;
                                border: 3px solid #fff;
                                ">{{ item.name }}</el-tag>
                            </VueDraggable>
                            <!-- <div style="padding-top: 20px">
                                <img v-if="showRes && imageUrl != ''" :src="require(`../../../img/${afterDealUrl}`)"
                                    width="300px" />
                            </div> -->
                        </div>

                        <div v-show="preShow" class="footPreview">
                            <div style="max-width: 150px; max-height: 140px; margin-bottom: 10px">
                                <img v-if="imageUrl1 && list2.length != 0" src="../../../img/1.png"
                                    style="width: 100%; height: 100%" />
                                <img v-if="imageUrl1 && list2.length == 0" src="../../../assets/jiantou.png" />
                            </div>
                            <div style="width: 150px; height: 140px; margin-bottom: 10px">
                                <img v-if="imageUrl2 && list2.length != 0" src="../../../img/2.png"
                                    style="width: 100%; height: 100%" />
                                <img v-if="imageUrl2 && list2.length == 0" src="../../../assets/jiantou.png" />
                            </div>
                            <div style="width: 150px; height: 140px; margin-bottom: 10px">
                                <img v-if="imageUrl3 && list2.length != 0" src="../../../img/3.png"
                                    style="width: 100%; height: 100%" />
                                <img v-if="imageUrl3 && list2.length == 0" src="../../../assets/jiantou.png" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-upload">
                    <div class="upload-demo">
                        <el-menu style="background-color: #383838;width: 190px;  transform: scale(1.5)">
                            <el-sub-menu>
                                <template #title>
                                    <div id="type">选择预测方式</div>
                                </template>
                                <el-menu-item v-for="(item, index) in identification" :key="item"
                                    @click="change(item.name)" style="
                      background-color: #18191b;
                      font-size: 20px;
                      font-weight: 900;
                    ">
                                    <div style="color: #eeeeee">
                                        {{ index + 1 }}.{{ item.name }}
                                    </div>
                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </div>
                    <el-button style="font-size: 38px; font-weight: 900; padding: 30px" type="info" size="large"
                        @click="identificate">开始预测</el-button>
                </div>

                <div class="content-res">
                    <div v-if="identificated == true" style="display: flex;flex-wrap: wrap;">
                        <div v-for="i in this.choosing == this.identification[0].name ? resList : resList2" :key="i"
                            style="margin:10px 15px;width: 300px; display: flex;flex-direction: column;justify-content: center;align-items: center;">
                            <span style="font-size: 20px;color: white;">推荐指数:&nbsp;<el-rate disabled size="large"
                                    allow-half v-model="i.star" /></span>
                            <img :src="i.imgSrc" width="300px" height="180px" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>




<script>
import { Plus } from "@element-plus/icons-vue";
import { VueDraggable } from "vue-draggable-plus";

export default {
    components: {
        Plus,
        VueDraggable,
    },
    data() {
        return {

            //展示图片个数
            demo: true,
            //延时
            loading: false,
            //正在选择的
            choosing: "",
            showerror: false,
            showRes: false,
            // afterDealUrl: "2.png",
            list1: [
                {
                    type: "primary",
                    name: "流行元素",
                },
                {
                    type: "success",
                    name: "流行面料",
                },
                {
                    type: "primary",
                    name: "流行色系",
                },
                {
                    type: "success",
                    name: "主题趋势",
                },
                {
                    type: "primary",
                    name: "工艺趋势",
                },
                {
                    type: "success",
                    name: "图案趋势",
                },
                {
                    type: "warning",
                    name: "查看更多",
                },
            ],
            preShow: false, // 预处理后的图片的显示控制
            list2: [],
            //图片链接
            imageUrl: "",
            imageUrl1: "",
            imageUrl2: "",
            imageUrl3: "",
            //展示结果的图片
            dialogImageUrl: "src/img/希腊脚.png",
            //是否展示结果
            identificated: false,
            //模型数据
            identification: [
                {
                    name: "基础模型",
                },
                {
                    name: "拓展模型",
                }
            ],
            resList: [
                {
                    star: 1,
                    imgSrc: require('@/img/线稿配色/基础/1.png'),
                },
                {
                    star: 2,
                    imgSrc: require('@/img/线稿配色/基础/2.png'),
                },
                {
                    star: 1.5,
                    imgSrc: require('@/img/线稿配色/基础/3.png'),
                },
                {
                    star: 2.5,
                    imgSrc: require('@/img/线稿配色/基础/4.png'),
                },
            ],
            resList2: [
                {
                    star: 4,
                    imgSrc: require('@/img/线稿配色/拓展/1.png'),
                },
                {
                    star: 3.5,
                    imgSrc: require('@/img/线稿配色/拓展/2.png'),
                },
                {
                    star: 4.5,
                    imgSrc: require('@/img/线稿配色/拓展/3.png'),
                },
                {
                    star: 5,
                    imgSrc: require('@/img/线稿配色/拓展/4.png'),
                },
            ]
        };
    },
    methods: {
        sotr() {
            this.list2 = Array.from(
                new Set(this.list2.map((item) => JSON.stringify(item)))
            ).map((item) => JSON.parse(item));
        },
        //修改模型
        change(a) {
            document.getElementById("type").innerText = a;
            this.choosing = a;
            if (a == this.identification[0].name) {
                this.demo = true;
                // this.imageUrl1 = "";
                // this.imageUrl2 = "";
                // this.imageUrl3 = "";
            }
            if (a == this.identification[1].name) {
                // this.demo = false;
                // this.imageUrl = "";
            }
            this.identificated = false
        },
        //展示结果
        identificate() {
            this.loading = true;
            let t = 0;
            if (this.choosing == this.identification[0].name) {
                t = 3000;
            } else if (this.choosing == this.identification[1].name) {
                t = 10000;
            }
            console.log("执行", t);
            setTimeout(() => {
                this.loading = false;
                this.identificated = true;
                if (this.list2.length > 0) {
                    console.log(this.list2);
                    // if (this.list2[0].name == "曝光处理") {
                    //     this.afterDealUrl = "normal.png";
                    // } else {
                    //     this.afterDealUrl = "2.png";
                    // }
                    this.showRes = true;
                } else {
                    this.showRes = false;
                }
            }, t);
        },

        upload() {
            // imageUrl.value = 'src/img/希腊脚.png'
            document.getElementById("getimg").click();
            let div = document.getElementsByClassName("uploader");
            div[0].style.backgroundColor = "#3a3b3d";
            console.log(div);

            console.log("上传图片");
        },

        upload1() {
            // imageUrl.value = 'src/img/希腊脚.png'
            document.getElementById("getimg1").click();
            let div = document.getElementsByClassName("uploader");
            div[0].style.backgroundColor = "#3a3b3d";
            console.log(div);

            console.log("上传图片");
        },
        upload2() {
            // imageUrl.value = 'src/img/希腊脚.png'
            document.getElementById("getimg2").click();
            let div = document.getElementsByClassName("uploader");
            div[1].style.backgroundColor = "#3a3b3d";
            console.log(div);

            console.log("上传图片");
        },
        upload3() {
            // imageUrl.value = 'src/img/希腊脚.png'
            document.getElementById("getimg3").click();
            let div = document.getElementsByClassName("uploader");
            div[2].style.backgroundColor = "#3a3b3d";
            console.log(div);

            console.log("上传图片");
        },

        // 处理文件选择
        handleFileChange(event) {
            const file = event.target.files[0];
            if (file) {
                this.imageUrl = URL.createObjectURL(file);
            }
        },

        handleFileChange1(event) {
            const file = event.target.files[0];
            if (file) {
                this.imageUrl1 = URL.createObjectURL(file);
            }
        },
        handleFileChange2(event) {
            const file = event.target.files[0];
            if (file) {
                this.imageUrl2 = URL.createObjectURL(file);
            }
        },
        handleFileChange3(event) {
            const file = event.target.files[0];
            if (file) {
                this.imageUrl3 = URL.createObjectURL(file);
            }
        },

        handleClose(tag) {
            this.list2.splice(this.list2.indexOf(tag), 1);
        },
    },
};
</script>

<style scoped lang="scss">
input {
    visibility: hidden;
    /* opacity:0; */
    position: absolute;
    left: 100px;
    top: 210px;
}

.uploader {
    width: 100%;
    height: 100%;
    background-color: rgb(56, 56, 56);
    border-color: aquamarine;
    display: flex;
    align-content: center;
    border-radius: 8px;
    cursor: pointer;
}

.upload-image {
    width: 150px;
    height: 140px;
    margin: auto;
    flex-shrink: 0;
}

#drag1 .el-tag {
    margin: 0 10px;
}

#drag2 .el-tag {
    margin: 10px;
}

.absolute {
    width: 200px;
    flex: 2;
    border-style: solid;
    border-radius: 10px;
    border-color: rgb(69, 69, 69);
    margin-left: 50px;
    // display: flex;
    // justify-content: center;
    // align-items: start;

    .el-tag {
        width: 120px;
        height: 120px;
        font-size: 22px;

        &:hover {
            transform: scale(1.1);
            transition: all 0.3s ease;
            box-shadow: 0 0 5px #000000;
        }
    }
}

.footPreview {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

el-menu-item {
    background-color: rgb(104, 91, 113);
}

#type {
    color: #eeeeee;
    font-weight: bold;
    font-size: 22px;
}

.box {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.toolBox {
    display: flex;
    flex-direction: column;
    background-color: rgb(97, 101, 103);
    width: 95%;
    height: 150px;
    border-radius: 10px;
    align-self: center;
    margin: 0 20px 10px 20px;
}

.title {
    align-self: center;
    font-size: 44px;
    color: #eeeeee;
    font-weight: 900;
}

.toolBox-bottom {
    // margin: 10px;
}

.toolBox-bottom .el-tag {
    width: 100px;
    height: 80px;

    &:hover {
        transform: scale(1.1);
        transition: all 0.3s ease;
        box-shadow: 0 0 5px #000000;
    }
}

.toolBox-bottom .el-tag div {
    font-size: 22px;
    font-weight: 900;
}

.content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content-title {
    align-self: center;
    font-size: 48px;
    font-weight: 900;
    color: #f67d0c;
}

.content-box {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.content-upload1 {
    display: flex;
    width: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
}

.content-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    width: 200px;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
}

.upload-demo1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.botton-compact {
    //   margin-right: 50px;
    height: 50px;
    justify-content: center;

    div {
        font-weight: bold;
        font-size: 40px;
        color: #eeeeee;
    }
}

.identification-content {
    width: 300px;
    margin-top: 100px;
}

.identification-title {
    font-weight: bold;
    font-size: 30px;

    color: #eeeeee;
}

.content-identification {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin-left: 100px;
}

.content-res {
    margin-left: 100px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    align-self: self-start;

    :deep .el-rate__item {
        transform: scale(2);
        margin: 0 2.2px;
    }
}

.res-title {
    color: #eeeeee;
    font-size: 30px;
    font-weight: bold;
}

.res-img {
    margin-top: 80px;
}

.res-content {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.res-content-title {
    color: #eeeeee;
    align-self: center;
    font-size: 28px;
}
</style>